<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Symbol &amp; 迭代器 &amp; 生成器 | Guru Note</title>
    <meta name="generator" content="VuePress 1.7.1">
    <link rel="stylesheet" href="./font/index.css">
    <script src="/docs/icon/svg.js"></script>
    <meta name="description" content="Sea of dawn">
    
    <link rel="preload" href="/docs/assets/css/0.styles.efa081cd.css" as="style"><link rel="preload" href="/docs/assets/js/app.cdec4db9.js" as="script"><link rel="preload" href="/docs/assets/js/2.993bd611.js" as="script"><link rel="preload" href="/docs/assets/js/73.47155429.js" as="script"><link rel="preload" href="/docs/assets/js/7.5a12abef.js" as="script"><link rel="prefetch" href="/docs/assets/js/10.c3177bdb.js"><link rel="prefetch" href="/docs/assets/js/100.60c23478.js"><link rel="prefetch" href="/docs/assets/js/101.7ea29e1b.js"><link rel="prefetch" href="/docs/assets/js/102.7f47e485.js"><link rel="prefetch" href="/docs/assets/js/103.ea9ce400.js"><link rel="prefetch" href="/docs/assets/js/104.4ec6a518.js"><link rel="prefetch" href="/docs/assets/js/105.75526347.js"><link rel="prefetch" href="/docs/assets/js/106.01f6b03b.js"><link rel="prefetch" href="/docs/assets/js/107.69fe0811.js"><link rel="prefetch" href="/docs/assets/js/108.fa23768b.js"><link rel="prefetch" href="/docs/assets/js/109.90df1698.js"><link rel="prefetch" href="/docs/assets/js/11.54347528.js"><link rel="prefetch" href="/docs/assets/js/110.dd8d7227.js"><link rel="prefetch" href="/docs/assets/js/111.ccf25ceb.js"><link rel="prefetch" href="/docs/assets/js/112.6963298f.js"><link rel="prefetch" href="/docs/assets/js/113.30ceb3d8.js"><link rel="prefetch" href="/docs/assets/js/114.42ef6603.js"><link rel="prefetch" href="/docs/assets/js/115.f1db7817.js"><link rel="prefetch" href="/docs/assets/js/116.92971223.js"><link rel="prefetch" href="/docs/assets/js/117.c5a65e7e.js"><link rel="prefetch" href="/docs/assets/js/118.e329035d.js"><link rel="prefetch" href="/docs/assets/js/119.cbb17c5e.js"><link rel="prefetch" href="/docs/assets/js/12.c8144ee8.js"><link rel="prefetch" href="/docs/assets/js/120.8537f6a6.js"><link rel="prefetch" href="/docs/assets/js/121.257d3851.js"><link rel="prefetch" href="/docs/assets/js/122.96a5f921.js"><link rel="prefetch" href="/docs/assets/js/123.2220fd12.js"><link rel="prefetch" href="/docs/assets/js/124.552b1a29.js"><link rel="prefetch" href="/docs/assets/js/125.4e36fe37.js"><link rel="prefetch" href="/docs/assets/js/126.3939cdcc.js"><link rel="prefetch" href="/docs/assets/js/127.014df434.js"><link rel="prefetch" href="/docs/assets/js/13.edc237a8.js"><link rel="prefetch" href="/docs/assets/js/14.66270d4f.js"><link rel="prefetch" href="/docs/assets/js/15.0804164b.js"><link rel="prefetch" href="/docs/assets/js/16.dec928ab.js"><link rel="prefetch" href="/docs/assets/js/17.bbfc90a8.js"><link rel="prefetch" href="/docs/assets/js/18.76904860.js"><link rel="prefetch" href="/docs/assets/js/19.80a98011.js"><link rel="prefetch" href="/docs/assets/js/20.c39e42bd.js"><link rel="prefetch" href="/docs/assets/js/21.287b744a.js"><link rel="prefetch" href="/docs/assets/js/22.c9506be7.js"><link rel="prefetch" href="/docs/assets/js/23.9732a229.js"><link rel="prefetch" href="/docs/assets/js/24.21ed1f05.js"><link rel="prefetch" href="/docs/assets/js/25.8f1926f6.js"><link rel="prefetch" href="/docs/assets/js/26.61b6eb9f.js"><link rel="prefetch" href="/docs/assets/js/27.3706753c.js"><link rel="prefetch" href="/docs/assets/js/28.b6b182cf.js"><link rel="prefetch" href="/docs/assets/js/29.ae979ad9.js"><link rel="prefetch" href="/docs/assets/js/3.a7f8dd77.js"><link rel="prefetch" href="/docs/assets/js/30.f2233269.js"><link rel="prefetch" href="/docs/assets/js/31.06780314.js"><link rel="prefetch" href="/docs/assets/js/32.2dad91d1.js"><link rel="prefetch" href="/docs/assets/js/33.87ec6e22.js"><link rel="prefetch" href="/docs/assets/js/34.7b75f220.js"><link rel="prefetch" href="/docs/assets/js/35.3184991f.js"><link rel="prefetch" href="/docs/assets/js/36.28248fbe.js"><link rel="prefetch" href="/docs/assets/js/37.5824a979.js"><link rel="prefetch" href="/docs/assets/js/38.99a364fe.js"><link rel="prefetch" href="/docs/assets/js/39.a5f43732.js"><link rel="prefetch" href="/docs/assets/js/4.a55d89ed.js"><link rel="prefetch" href="/docs/assets/js/40.629f78f7.js"><link rel="prefetch" href="/docs/assets/js/41.e4f58d1c.js"><link rel="prefetch" href="/docs/assets/js/42.9f41aa47.js"><link rel="prefetch" href="/docs/assets/js/43.636412b6.js"><link rel="prefetch" href="/docs/assets/js/44.3b491aef.js"><link rel="prefetch" href="/docs/assets/js/45.77df19bc.js"><link rel="prefetch" href="/docs/assets/js/46.01f53ddd.js"><link rel="prefetch" href="/docs/assets/js/47.476e85c9.js"><link rel="prefetch" href="/docs/assets/js/48.198502dc.js"><link rel="prefetch" href="/docs/assets/js/49.0d59d332.js"><link rel="prefetch" href="/docs/assets/js/5.1597c0f8.js"><link rel="prefetch" href="/docs/assets/js/50.02baf101.js"><link rel="prefetch" href="/docs/assets/js/51.c9fbd54d.js"><link rel="prefetch" href="/docs/assets/js/52.4cb4459b.js"><link rel="prefetch" href="/docs/assets/js/53.248450d7.js"><link rel="prefetch" href="/docs/assets/js/54.83f12d1e.js"><link rel="prefetch" href="/docs/assets/js/55.b18accba.js"><link rel="prefetch" href="/docs/assets/js/56.8a160b09.js"><link rel="prefetch" href="/docs/assets/js/57.b854a940.js"><link rel="prefetch" href="/docs/assets/js/58.4500f315.js"><link rel="prefetch" href="/docs/assets/js/59.59400e36.js"><link rel="prefetch" href="/docs/assets/js/6.887ba020.js"><link rel="prefetch" href="/docs/assets/js/60.4dd5b5bb.js"><link rel="prefetch" href="/docs/assets/js/61.50d8c8f6.js"><link rel="prefetch" href="/docs/assets/js/62.17d10daa.js"><link rel="prefetch" href="/docs/assets/js/63.d5f821cc.js"><link rel="prefetch" href="/docs/assets/js/64.7bf2519f.js"><link rel="prefetch" href="/docs/assets/js/65.0a1c9bc8.js"><link rel="prefetch" href="/docs/assets/js/66.1bcaa81c.js"><link rel="prefetch" href="/docs/assets/js/67.326bdf9b.js"><link rel="prefetch" href="/docs/assets/js/68.2b3b63b2.js"><link rel="prefetch" href="/docs/assets/js/69.c9b1a1a9.js"><link rel="prefetch" href="/docs/assets/js/70.a5fede78.js"><link rel="prefetch" href="/docs/assets/js/71.288d9643.js"><link rel="prefetch" href="/docs/assets/js/72.8665d6b8.js"><link rel="prefetch" href="/docs/assets/js/74.4d4738f8.js"><link rel="prefetch" href="/docs/assets/js/75.659a325f.js"><link rel="prefetch" href="/docs/assets/js/76.a263f692.js"><link rel="prefetch" href="/docs/assets/js/77.9d86d59e.js"><link rel="prefetch" href="/docs/assets/js/78.a41b5d88.js"><link rel="prefetch" href="/docs/assets/js/79.5d0fc4cc.js"><link rel="prefetch" href="/docs/assets/js/8.80d0c81d.js"><link rel="prefetch" href="/docs/assets/js/80.01a11f6a.js"><link rel="prefetch" href="/docs/assets/js/81.9c0207d9.js"><link rel="prefetch" href="/docs/assets/js/82.12be8e04.js"><link rel="prefetch" href="/docs/assets/js/83.00fa5f46.js"><link rel="prefetch" href="/docs/assets/js/84.f14cd53c.js"><link rel="prefetch" href="/docs/assets/js/85.e9d7c0d1.js"><link rel="prefetch" href="/docs/assets/js/86.eb78fbbf.js"><link rel="prefetch" href="/docs/assets/js/87.8a31f5ae.js"><link rel="prefetch" href="/docs/assets/js/88.0f10e6dc.js"><link rel="prefetch" href="/docs/assets/js/89.a17253c9.js"><link rel="prefetch" href="/docs/assets/js/9.2fa568cb.js"><link rel="prefetch" href="/docs/assets/js/90.e56bc609.js"><link rel="prefetch" href="/docs/assets/js/91.5277db18.js"><link rel="prefetch" href="/docs/assets/js/92.b0bb8aa7.js"><link rel="prefetch" href="/docs/assets/js/93.cd790b77.js"><link rel="prefetch" href="/docs/assets/js/94.76bbe227.js"><link rel="prefetch" href="/docs/assets/js/95.4f07ca32.js"><link rel="prefetch" href="/docs/assets/js/96.2b1e8485.js"><link rel="prefetch" href="/docs/assets/js/97.e93b3461.js"><link rel="prefetch" href="/docs/assets/js/98.658063a1.js"><link rel="prefetch" href="/docs/assets/js/99.a3642e6d.js">
    <link rel="stylesheet" href="/docs/assets/css/0.styles.efa081cd.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/docs/" class="home-link router-link-active"><!----> <span class="site-name">Guru Note</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----> <svg aria-hidden="true" class="icon search-icon"><use xlink:href="#icon-search"></use></svg></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/docs/layout/" class="nav-link">
  CSS 手册
</a></div><div class="nav-item"><a href="/docs/js/" class="nav-link router-link-active">
  JavaScript
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="前端进阶" class="dropdown-title"><span class="title">前端进阶</span> <span class="arrow down"></span></button> <button type="button" aria-label="前端进阶" class="mobile-dropdown-title"><span class="title">前端进阶</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          前端框架
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/docs/vue/" class="nav-link">
  Vue.js
</a></li><li class="dropdown-subitem"><a href="/docs/react/" class="nav-link">
  React.js
</a></li></ul></li><li class="dropdown-item"><h4>
          拓展语言
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/docs/node/" class="nav-link">
  Node.js
</a></li><li class="dropdown-subitem"><a href="/docs/ts/" class="nav-link">
  TypeScript
</a></li></ul></li></ul></div></div><div class="nav-item"><a href="/docs/devbook/" class="nav-link">
  开发手册
</a></div><div class="nav-item"><a href="/docs/exam/" class="nav-link">
  金九银十
</a></div><div class="nav-item"><a href="/docs/message/" class="nav-link">
  留言板
</a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><div class="el-scrollbar"><div class="scrollbar-wrapper el-scrollbar__wrap el-scrollbar__wrap--hidden-default"><div class="el-scrollbar__view"><nav class="nav-links"><div class="nav-item"><a href="/docs/layout/" class="nav-link">
  CSS 手册
</a></div><div class="nav-item"><a href="/docs/js/" class="nav-link router-link-active">
  JavaScript
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="前端进阶" class="dropdown-title"><span class="title">前端进阶</span> <span class="arrow down"></span></button> <button type="button" aria-label="前端进阶" class="mobile-dropdown-title"><span class="title">前端进阶</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          前端框架
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/docs/vue/" class="nav-link">
  Vue.js
</a></li><li class="dropdown-subitem"><a href="/docs/react/" class="nav-link">
  React.js
</a></li></ul></li><li class="dropdown-item"><h4>
          拓展语言
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/docs/node/" class="nav-link">
  Node.js
</a></li><li class="dropdown-subitem"><a href="/docs/ts/" class="nav-link">
  TypeScript
</a></li></ul></li></ul></div></div><div class="nav-item"><a href="/docs/devbook/" class="nav-link">
  开发手册
</a></div><div class="nav-item"><a href="/docs/exam/" class="nav-link">
  金九银十
</a></div><div class="nav-item"><a href="/docs/message/" class="nav-link">
  留言板
</a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/docs/js/" aria-current="page" class="sidebar-link">介绍</a></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>JavaScript</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/docs/js/base/type-of-data.html" class="sidebar-link">JS 的数据类型</a></li><li><a href="/docs/js/base/object.html" class="sidebar-link">JS 对象的常用属性</a></li><li><a href="/docs/js/base/function.html" class="sidebar-link">函数 &amp; 原型链</a></li><li><a href="/docs/js/base/dom-api.html" class="sidebar-link">DOM API 总结</a></li><li><a href="/docs/js/base/node-api.html" class="sidebar-link">节点 API 总结</a></li><li><a href="/docs/js/base/node-list.html" class="sidebar-link">节点中的伪数组</a></li><li><a href="/docs/js/base/dom-operate-across-threads.html" class="sidebar-link">DOM 操作跨线程</a></li><li><a href="/docs/js/base/create-jquery.html" class="sidebar-link">jQuery 中的链式操作</a></li><li><a href="/docs/js/base/plugin.html" class="sidebar-link">JavaScript 插件 / 库</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>ES6</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/docs/js/es6/scope.html" class="sidebar-link">作用域</a></li><li><a href="/docs/js/es6/new-object.html" class="sidebar-link">新版对象</a></li><li><a href="/docs/js/es6/anatomy-assignment.html" class="sidebar-link">参数处理 &amp; 解构赋值</a></li><li><a href="/docs/js/es6/new-string.html" class="sidebar-link">新版字符串</a></li><li><a href="/docs/js/es6/module-use.html" class="sidebar-link">ES6 模块化</a></li><li><a href="/docs/js/es6/promise-usage.html" class="sidebar-link">Promise</a></li><li><a href="/docs/js/es6/await-and-async.html" class="sidebar-link">async 和 await 的用法</a></li><li><a href="/docs/js/es6/symbol-iterate-generate.html" aria-current="page" class="active sidebar-link">Symbol &amp; 迭代器 &amp; 生成器</a></li><li><a href="/docs/js/es6/arrow-function.html" class="sidebar-link">箭头函数</a></li><li><a href="/docs/js/es6/new-api.html" class="sidebar-link">ES6 新增 API</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>JavaScript 进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/docs/js/part/ajax-use.html" class="sidebar-link">AJAX</a></li><li><a href="/docs/js/part/cross-domain.html" class="sidebar-link">跨域 &amp; CORS &amp; JSONP</a></li><li><a href="/docs/js/part/browser-storage.html" class="sidebar-link">浏览器模型</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>JS 小记</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/docs/js/note/project.html" class="sidebar-link">JavaScript 搭建项目</a></li><li><a href="/docs/js/note/js-garbage.html" class="sidebar-link">JS 的缺陷</a></li><li><a href="/docs/js/note/setInterval-a-setTimeout.html" class="sidebar-link">使用 setTimeout 实现 setInterval</a></li><li><a href="/docs/js/note/array-deduplica.html" class="sidebar-link">数组去重</a></li><li><a href="/docs/js/note/download-file.html" class="sidebar-link">使用 JS 下载文件</a></li><li><a href="/docs/js/note/top-nav.html" class="sidebar-link">设置导航动态显示 / 隐藏</a></li><li><a href="/docs/js/note/anchor-transition.html" class="sidebar-link">JS 实现点击锚点过渡效果</a></li><li><a href="/docs/js/note/data-list.html" class="sidebar-link">数据处理</a></li></ul></section></li></ul> </div></div><div class="el-scrollbar__bar is-horizontal"><div class="el-scrollbar__thumb" style="width:0;transform:translateX(0%);ms-transform:translateX(0%);webkit-transform:translateX(0%);"></div></div><div class="el-scrollbar__bar is-vertical"><div class="el-scrollbar__thumb" style="height:0;transform:translateY(0%);ms-transform:translateY(0%);webkit-transform:translateY(0%);"></div></div></div></aside> <main class="page"> <div class="re-page-top"><h1 class="title"><span>Symbol &amp; 迭代器 &amp; 生成器</span></h1> <div class="re-page-index"><div class="page-index-title"><span class="open-catalog"><svg aria-hidden="true" class="icon arrow-right"><use xlink:href="#icon-bold-right"></use></svg> <span class="text">目录</span></span></div> <div class="page-index-content"><div class="page-catalog" style="display:none;"><div class="synopsis-wrap"><ul class="synopsis-ul"><li class="synopsis-li"><a href="/docs/js/es6/symbol-iterate-generate.html#大纲" class="synopsis-link">大纲</a></li><li class="synopsis-li"><a href="/docs/js/es6/symbol-iterate-generate.html#数据类型" class="synopsis-link">数据类型</a></li><li class="synopsis-li"><a href="/docs/js/es6/symbol-iterate-generate.html#symbol的使用" class="synopsis-link">Symbol的使用</a></li><li class="synopsis-li"><a href="/docs/js/es6/symbol-iterate-generate.html#迭代器" class="synopsis-link">迭代器</a></li><li class="synopsis-li"><a href="/docs/js/es6/symbol-iterate-generate.html#生成器-迭代器生成语法糖" class="synopsis-link">生成器（迭代器生成语法糖）</a></li><li class="synopsis-li"><a href="/docs/js/es6/symbol-iterate-generate.html#for-of-迭代器访问语法糖" class="synopsis-link">for of（迭代器访问语法糖）</a><ul class="synopsis-ul"><li class="synopsis-li"><a href="/docs/js/es6/symbol-iterate-generate.html#真正的遍历" class="synopsis-link">真正的遍历</a></li><li class="synopsis-li"><a href="/docs/js/es6/symbol-iterate-generate.html#for-in-和-for-of-的区别" class="synopsis-link">for in 和 for of 的区别</a></li><li class="synopsis-li"><a href="/docs/js/es6/symbol-iterate-generate.html#数组和对象遍历的区别" class="synopsis-link">数组和对象遍历的区别</a></li><li class="synopsis-li"><a href="/docs/js/es6/symbol-iterate-generate.html#判断对象是否可迭代" class="synopsis-link">判断对象是否可迭代</a></li><li class="synopsis-li"><a href="/docs/js/es6/symbol-iterate-generate.html#生成可迭代对象" class="synopsis-link">生成可迭代对象</a></li><li class="synopsis-li"><a href="/docs/js/es6/symbol-iterate-generate.html#默认内置可迭代对象" class="synopsis-link">默认内置可迭代对象</a></li></ul></li></ul></div></div></div></div></div> <div class="theme-default-content content__default"><h2 id="大纲"><a href="#大纲" class="header-anchor">#</a> 大纲</h2> <p><strong>之前的 7 种数据类型</strong></p> <div class="language- extra-class"><pre class="language-text"><code>string number boolean undefined null object symbol
</code></pre></div><p>最新的 ECMAScript 标准（ES10）添加了：<a href="https://developer.mozilla.org/zh-CN/docs/Glossary/BigInt" target="_blank" rel="noopener noreferrer">BigInt<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p><strong>三种 for</strong></p> <div class="language- extra-class"><pre class="language-text"><code>for(let i=0; i&lt;10; i++){} // 循环
for(let key in object){} // 遍历一个对象
for(let item of iterableObject){} // 可迭代对象
</code></pre></div><blockquote><p>for in 与 for of 的区别：迭代是一个一个访问，中间会有停顿，但遍历是访问所有内容，中间不会有停顿。</p></blockquote> <h2 id="数据类型"><a href="#数据类型" class="header-anchor">#</a> 数据类型</h2> <p><strong>最新的 ECMAScript 标准定义了 8 种数据类型:</strong></p> <p>7 种原始类型</p> <ul><li><a href="https://developer.mozilla.org/zh-CN/docs/Glossary/Boolean" target="_blank" rel="noopener noreferrer">Boolean<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://developer.mozilla.org/zh-CN/docs/Glossary/Null" target="_blank" rel="noopener noreferrer">Null<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://developer.mozilla.org/zh-CN/docs/Glossary/undefined" target="_blank" rel="noopener noreferrer">Undefined<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://developer.mozilla.org/zh-CN/docs/Glossary/Number" target="_blank" rel="noopener noreferrer">Number<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://developer.mozilla.org/zh-CN/docs/Glossary/BigInt" target="_blank" rel="noopener noreferrer">BigInt<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://developer.mozilla.org/zh-CN/docs/Glossary/%E5%AD%97%E7%AC%A6%E4%B8%B2" target="_blank" rel="noopener noreferrer">String<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://developer.mozilla.org/zh-CN/docs/Glossary/Symbol" target="_blank" rel="noopener noreferrer">Symbol<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <p>和 <a href="https://developer.mozilla.org/zh-CN/docs/Glossary/Object" target="_blank" rel="noopener noreferrer">Object<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>MDN 原文：<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Data_structures" target="_blank" rel="noopener noreferrer">JavaScript 数据类型和数据结构<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <blockquote><p>注意：</p> <ul><li><p>array function date regex(正则) 都属于 object 类型</p></li> <li><p>Object 属于复杂类型（也称引用类型），其他7种属于简单类型（也称基本类型）</p></li> <li><p>Symbol 类型是 ES6 新增</p></li> <li><p>BigInt 类型是 ES10 新增</p></li></ul></blockquote> <h2 id="symbol的使用"><a href="#symbol的使用" class="header-anchor">#</a> Symbol的使用</h2> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> race <span class="token operator">=</span> <span class="token punctuation">{</span>
    神族<span class="token operator">:</span> <span class="token string">'protoss'</span><span class="token punctuation">,</span> 人族<span class="token operator">:</span> <span class="token string">'terran'</span><span class="token punctuation">,</span> 虫族<span class="token operator">:</span> <span class="token string">'zerg'</span>
<span class="token punctuation">}</span>
<span class="token keyword">function</span> <span class="token function">createdRole</span><span class="token punctuation">(</span><span class="token parameter">input</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span>input <span class="token operator">===</span> race<span class="token punctuation">.</span>神族<span class="token punctuation">)</span><span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'你选择了神族'</span><span class="token punctuation">)</span> <span class="token punctuation">}</span>
    <span class="token keyword">else</span> <span class="token keyword">if</span><span class="token punctuation">(</span>input <span class="token operator">===</span> race<span class="token punctuation">.</span>神族<span class="token punctuation">)</span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'你选择了人族'</span><span class="token punctuation">)</span> <span class="token punctuation">}</span>
    <span class="token keyword">else</span> <span class="token keyword">if</span><span class="token punctuation">(</span>input <span class="token operator">===</span> race<span class="token punctuation">.</span>神族<span class="token punctuation">)</span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'你选择了虫族'</span><span class="token punctuation">)</span> <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token function">createdRole</span><span class="token punctuation">(</span><span class="token string">'protoss'</span><span class="token punctuation">)</span> <span class="token comment">// 你选择了神族</span>

<span class="token comment">/* 一般推荐用这样的传参方式（因为这样的方式更准确，当你写的对象属性出错时会报错，而直接传入字符串并不会报错，只会返回undefined）： */</span>
<span class="token function">createdRole</span><span class="token punctuation">(</span>race<span class="token punctuation">.</span>神族<span class="token punctuation">)</span> <span class="token comment">// 你选择了神族</span>
</code></pre></div><p>当你将上面代码中的race对象的属性值都改变时，其实并不会影响运行结果，也就是我们并不关心它们属性的值是什么，只要每个属性的值不相同即可，如下：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> race <span class="token operator">=</span> <span class="token punctuation">{</span>
    神族<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> 人族<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> 虫族<span class="token operator">:</span> <span class="token number">3</span>
<span class="token punctuation">}</span>
<span class="token keyword">function</span> <span class="token function">createdRole</span><span class="token punctuation">(</span><span class="token parameter">input</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span>input <span class="token operator">===</span> race<span class="token punctuation">.</span>神族<span class="token punctuation">)</span><span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'你选择了神族'</span><span class="token punctuation">)</span> <span class="token punctuation">}</span>
    <span class="token keyword">else</span> <span class="token keyword">if</span><span class="token punctuation">(</span>input <span class="token operator">===</span> race<span class="token punctuation">.</span>神族<span class="token punctuation">)</span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'你选择了人族'</span><span class="token punctuation">)</span> <span class="token punctuation">}</span>
    <span class="token keyword">else</span> <span class="token keyword">if</span><span class="token punctuation">(</span>input <span class="token operator">===</span> race<span class="token punctuation">.</span>神族<span class="token punctuation">)</span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'你选择了虫族'</span><span class="token punctuation">)</span> <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token function">createdRole</span><span class="token punctuation">(</span>race<span class="token punctuation">.</span>神族<span class="token punctuation">)</span> <span class="token comment">// 你选择了神族</span>
</code></pre></div><p>这时就可以使用symbol，给每个属性创造一个独一无二的值：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> race <span class="token operator">=</span> <span class="token punctuation">{</span>
    神族<span class="token operator">:</span> <span class="token function">Symbol</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> 人族<span class="token operator">:</span> <span class="token function">Symbol</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> 虫族<span class="token operator">:</span> <span class="token function">Symbol</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
race<span class="token punctuation">.</span>神族 <span class="token operator">===</span> race<span class="token punctuation">.</span>人族 <span class="token comment">// false</span>
race<span class="token punctuation">.</span>神族 <span class="token operator">===</span> race<span class="token punctuation">.</span>虫族 <span class="token comment">// false</span>
</code></pre></div><h2 id="迭代器"><a href="#迭代器" class="header-anchor">#</a> 迭代器</h2> <p>在 JavaScript 中，<strong>迭代器</strong>是一个对象，它定义一个序列，并在终止时可能返回一个返回值。 更具体地说，迭代器是通过使用 <code>next()</code> 方法实现 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterator_protocol" target="_blank" rel="noopener noreferrer">Iterator protocol<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 的任何一个对象，该方法返回具有两个属性的对象： <code>value</code>，这是序列中的 next 值；和 <code>done</code> ，如果已经迭代到序列中的最后一个值，则它为 <code>true</code> 。如果 <code>value</code> 和 <code>done</code> 一起存在，则它是迭代器的返回值。</p> <p>一旦创建，迭代器对象可以通过重复调用 <code>next()</code> 显式地迭代。 迭代一个迭代器被称为消耗了这个迭代器，因为它通常只能执行一次。 在产生终止值之后，对 <code>next()</code> 的额外调用应该继续返回 <code>{done：true}</code>。</p> <p><strong>概述</strong></p> <p>迭代器是一个对象，每次调用它的 <code>.next()</code> 方法都会返回一个版本，当达到最终版本时，它的 done 属性会返回 true，之后方法的每次调用 done 都会返回 true</p> <p><strong>案例</strong></p> <p>创建一个发布器，每次调用它的<code>_value</code>值都加一</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">发布器</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">var</span> _value <span class="token operator">=</span> <span class="token number">0</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
        <span class="token function-variable function">next</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
            _value <span class="token operator">+=</span> <span class="token number">1</span>
            <span class="token keyword">return</span> <span class="token punctuation">{</span>
                value<span class="token operator">:</span> _value
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><p>给发布器添加一个 done 属性，当发布到最大值时 done 的值变为 true</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">发布器</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">var</span> _value <span class="token operator">=</span> <span class="token number">0</span>
    <span class="token keyword">var</span> max <span class="token operator">=</span> <span class="token number">5</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
        <span class="token function-variable function">next</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
            _value <span class="token operator">+=</span> <span class="token number">1</span>
            <span class="token keyword">if</span><span class="token punctuation">(</span>_value <span class="token operator">&gt;</span> max<span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token string">'报错，已经没有下一个了！'</span><span class="token punctuation">)</span> <span class="token punctuation">}</span>
            <span class="token keyword">if</span><span class="token punctuation">(</span>_value <span class="token operator">&gt;=</span> max<span class="token punctuation">)</span><span class="token punctuation">{</span>
                <span class="token keyword">return</span> <span class="token punctuation">{</span> value<span class="token operator">:</span> _value<span class="token punctuation">,</span> done<span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span>
            <span class="token punctuation">}</span><span class="token keyword">else</span> <span class="token punctuation">{</span>
                <span class="token keyword">return</span> <span class="token punctuation">{</span> value<span class="token operator">:</span> _value<span class="token punctuation">,</span> done<span class="token operator">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><p>调用</p> <div class="language-js extra-class"><pre class="language-js"><code>a<span class="token punctuation">.</span><span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token punctuation">{</span>value<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> done<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">}</span>
a<span class="token punctuation">.</span><span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token punctuation">{</span>value<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> done<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">}</span>
<span class="token operator">...</span>
a<span class="token punctuation">.</span><span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token punctuation">{</span>value<span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span> done<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">}</span>
</code></pre></div><p>每次调用 value 的值都会加一，当达到最大值时会提示报错，并返回 done 的值为 true</p> <h2 id="生成器-迭代器生成语法糖"><a href="#生成器-迭代器生成语法糖" class="header-anchor">#</a> 生成器（迭代器生成语法糖）</h2> <p>案例（ES6语法）</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span><span class="token operator">*</span> <span class="token function">发布器</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">var</span> version <span class="token operator">=</span> <span class="token number">0</span>
    <span class="token keyword">while</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        version <span class="token operator">+=</span> <span class="token number">1</span>
        <span class="token keyword">yield</span> version<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><p>调用，每次调用都会返回两个值，与上面生成器的案例一样</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token function">发布器</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
a<span class="token punctuation">.</span><span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token punctuation">{</span>value<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> done<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">}</span>
a<span class="token punctuation">.</span><span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token punctuation">{</span>value<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> done<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">}</span>
<span class="token operator">...</span>
</code></pre></div><blockquote><p>生成器的作用：生成器在日常生活中并不常用，所以记住即可</p></blockquote> <h2 id="for-of-迭代器访问语法糖"><a href="#for-of-迭代器访问语法糖" class="header-anchor">#</a> <code>for of</code>（迭代器访问语法糖）</h2> <p><strong>案例</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> array <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span>
<span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">let</span> item <span class="token keyword">of</span> array<span class="token punctuation">)</span><span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token comment">// 1 2 3</span>
</code></pre></div><h3 id="真正的遍历"><a href="#真正的遍历" class="header-anchor">#</a> 真正的遍历</h3> <p>当我们遍历一个数组时</p> <div class="language-js extra-class"><pre class="language-js"><code>array <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span>
<span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> array<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>array<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token comment">// 输出：1 2 3</span>
</code></pre></div><p>其实我们只遍历了数组中的数字，假如给数组添加一个属性：</p> <div class="language-js extra-class"><pre class="language-js"><code>array<span class="token punctuation">[</span><span class="token string">'x'</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token string">'y'</span>
</code></pre></div><p>此时数组变成了 4 项，但是 x 应该被遍历吗？</p> <div class="language-js extra-class"><pre class="language-js"><code>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>array<span class="token punctuation">)</span>
<span class="token comment">// 输出：[1, 2, 3, x: &quot;y&quot;]</span>
</code></pre></div><p>将上面的数组用对象模拟：</p> <div class="language-js extra-class"><pre class="language-js"><code>object <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token string">'0'</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token string">'1'</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token string">'2'</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token string">'x'</span><span class="token operator">:</span> <span class="token string">'y'</span><span class="token punctuation">}</span>
</code></pre></div><p>此时对象中的 x 该不该被遍历呢？你会发现在对象中它理论上是应该被遍历的</p> <p>查看上面的数组的下标，你会发现其实数组并没有下标</p> <div class="language-js extra-class"><pre class="language-js"><code>Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>array<span class="token punctuation">)</span>
<span class="token comment">// 输出：[&quot;0&quot;, &quot;1&quot;, &quot;2&quot;, &quot;x&quot;]</span>
</code></pre></div><p>将上面的对象变为数组</p> <div class="language-js extra-class"><pre class="language-js"><code>object <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token string">'0'</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token string">'1'</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token string">'2'</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token string">'x'</span><span class="token operator">:</span> <span class="token string">'y'</span><span class="token punctuation">}</span>
object<span class="token punctuation">.</span>length <span class="token operator">=</span> <span class="token number">3</span>
object<span class="token punctuation">.</span>__proto__ <span class="token operator">=</span> <span class="token class-name">Array</span><span class="token punctuation">.</span>prototype
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>object<span class="token punctuation">)</span>
<span class="token comment">// 此时的object变为了：[1, 2, 3, x: &quot;y&quot;]，并且带有length属性</span>
</code></pre></div><blockquote><p>结论：其实只是我们认为遍历数组应该通过下标遍历，但实际上的遍历应该将每个属性都遍历，例如下面的 <code>for in</code> 遍历。</p></blockquote> <h3 id="for-in-和-for-of-的区别"><a href="#for-in-和-for-of-的区别" class="header-anchor">#</a> <code>for in</code> 和 <code>for of</code> 的区别</h3> <p><strong><code>for in</code> 遍历</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> array <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span>
<span class="token keyword">let</span> object <span class="token operator">=</span> <span class="token punctuation">{</span>a<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> b<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> c<span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">}</span>
<span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">let</span> key <span class="token keyword">in</span> array<span class="token punctuation">)</span><span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>key<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token comment">// 输出：0 1 2</span>
<span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">let</span> key <span class="token keyword">in</span> object<span class="token punctuation">)</span><span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>key<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token comment">// 输出：a b c</span>
</code></pre></div><p><strong><code>for of</code>遍历</strong></p> <p>数组</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> array <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span>
<span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">let</span> key <span class="token keyword">of</span> array<span class="token punctuation">)</span><span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>key<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token comment">// 输出：1 2 3</span>
</code></pre></div><p>对象</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> object <span class="token operator">=</span>  <span class="token punctuation">{</span>a<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> b<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> c<span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">}</span>
<span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">let</span> key <span class="token keyword">of</span> object<span class="token punctuation">)</span><span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>key<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token comment">// 报错：Uncaught TypeError: object is not iterable</span>
</code></pre></div><blockquote><p>因为 <code>for of</code> 使用的是迭代的方法，迭代是一个一个访问，遍历是访问所有属性。迭代访问需要一定的顺序，而对象是没有顺序的，所以数组可以迭代，而对象不可以迭代</p></blockquote> <h3 id="数组和对象遍历的区别"><a href="#数组和对象遍历的区别" class="header-anchor">#</a> 数组和对象遍历的区别</h3> <p>当我们遍历一个数组或对象时</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> array <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token string">'0'</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token string">'1'</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token string">'2'</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token string">'length'</span><span class="token operator">:</span> <span class="token number">3</span> <span class="token punctuation">}</span>
<span class="token keyword">let</span> object <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token string">'0'</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token string">'1'</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token string">'2'</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token string">'x'</span><span class="token operator">:</span> <span class="token string">'y'</span><span class="token punctuation">}</span>
</code></pre></div><p>我们通常会认为上面的数组是有顺序的，而对象并没有。但是其实<strong>数组存储的顺序并不会影响我们的遍历结果，因为我们给数组强行指定了遍历顺序</strong>，假如将上面的数组改为：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> array <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token string">'0'</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token string">'2'</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token string">'1'</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token string">'length'</span><span class="token operator">:</span> <span class="token number">3</span> <span class="token punctuation">}</span>
</code></pre></div><p>当你使用 for  循环遍历时，依然是按下标顺序遍历：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> array<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>array<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token comment">// 输出：1 2 3</span>
</code></pre></div><p>上面的代码中，由于我们 i 的顺序是固定的，所以结果的顺序依然是固定的，即使数组中每个值存储的位置不同。</p> <p>数组与对象的区别：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 声明一个数组</span>
<span class="token keyword">let</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
<span class="token comment">// 声明一个对象</span>
<span class="token keyword">let</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token comment">// 数组的原型链</span>
arr<span class="token punctuation">.</span>__proto__ <span class="token operator">===</span> <span class="token class-name">Array</span><span class="token punctuation">.</span>prototype <span class="token comment">// true</span>
<span class="token comment">// 对象的原型链</span>
obj<span class="token punctuation">.</span>__proto__ <span class="token operator">===</span> <span class="token class-name">Object</span><span class="token punctuation">.</span>prototype <span class="token comment">// true</span>
</code></pre></div><p><strong>只要是对象，就可以遍历，但是只有符合某些特征的对象（如数组）才能迭代</strong></p> <h3 id="判断对象是否可迭代"><a href="#判断对象是否可迭代" class="header-anchor">#</a> 判断对象是否可迭代</h3> <p>通过判断该对象是否存在 <code>[Symbol.iterator]</code> 属性，即可判断该对象是否迭代，只有存在该属性的对象才可以迭代。例如：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
<span class="token keyword">let</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">[</span>Symbol<span class="token punctuation">.</span>iterator<span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token comment">// ƒ values() { [native code] }</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>obj<span class="token punctuation">[</span>Symbol<span class="token punctuation">.</span>iterator<span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token comment">// undefined</span>
</code></pre></div><h3 id="生成可迭代对象"><a href="#生成可迭代对象" class="header-anchor">#</a> 生成可迭代对象</h3> <p>将一个对象变为可迭代对象</p> <div class="language-js extra-class"><pre class="language-js"><code>object <span class="token operator">=</span> <span class="token punctuation">{</span>a<span class="token operator">:</span> <span class="token string">'a'</span><span class="token punctuation">,</span> b<span class="token operator">:</span> <span class="token string">'b'</span><span class="token punctuation">,</span> c<span class="token operator">:</span> <span class="token string">'c'</span><span class="token punctuation">}</span>
object<span class="token punctuation">[</span>Symbol<span class="token punctuation">.</span>iterator<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token operator">*</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">let</span> _keys <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>object<span class="token punctuation">)</span>
    <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">let</span> i<span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span> i<span class="token operator">&lt;</span>_keys<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">yield</span> object<span class="token punctuation">[</span>_keys<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">]</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><p>迭代</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">let</span> value <span class="token keyword">of</span> object<span class="token punctuation">)</span><span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token comment">// 输出：a b c</span>
</code></pre></div><p>其中的 <code>[Symbol.iterator]</code> 属性是一个 Symbol 类型的属性：</p> <div class="language-js extra-class"><pre class="language-js"><code>Symbol<span class="token punctuation">.</span>iterator
<span class="token function">Symbol</span><span class="token punctuation">(</span>Symbol<span class="token punctuation">.</span>iterator<span class="token punctuation">)</span>
</code></pre></div><h3 id="默认内置可迭代对象"><a href="#默认内置可迭代对象" class="header-anchor">#</a> 默认内置可迭代对象</h3> <p><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/String" target="_blank" rel="noopener noreferrer"><code>String</code><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>、<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Array" target="_blank" rel="noopener noreferrer"><code>Array</code><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>、<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/TypedArray" target="_blank" rel="noopener noreferrer"><code>TypedArray</code><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>、<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Map" target="_blank" rel="noopener noreferrer"><code>Map</code><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 和 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Set" target="_blank" rel="noopener noreferrer"><code>Set</code><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 都是内置可迭代对象，因为它们的原型对象都拥有一个 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Symbol/iterator" target="_blank" rel="noopener noreferrer"><code>Symbol.iterator</code><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 方法。</p></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">上次更新：</span><span class="time">2021-02-10 12:44</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev"><svg aria-hidden="true" class="icon"><use xlink:href="#icon-left"></use></svg> <a href="/docs/js/es6/await-and-async.html" class="prev">async 和 await 的用法</a></span> <span class="next"><a href="/docs/js/es6/arrow-function.html">箭头函数</a> <svg aria-hidden="true" class="icon"><use xlink:href="#icon-right"></use></svg></span></p></div> </main></div><div class="global-ui"><!----><!----></div></div>
    <script src="/docs/assets/js/app.cdec4db9.js" defer></script><script src="/docs/assets/js/2.993bd611.js" defer></script><script src="/docs/assets/js/73.47155429.js" defer></script><script src="/docs/assets/js/7.5a12abef.js" defer></script>
  </body>
</html>
